<template>
  <div >
    <!--    <div class="report-title">-->
    <!--      常见问题-->
    <!--    </div>-->
    <van-nav-bar
      title="通知"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!--    order-detail当中有几个 就循环几个报告！！-->
    <div v-for="(item) in reports" :key="item.id" @click="detailreport">
      <div class="notice-content">
        <div class="notice-header">
          <span class="notice-label">系统</span>
          <span class="notice-title">你的报告已生成</span>
          <span class="notice-time"> {{item.created}} </span>
        </div>
        <!--      下半部分-->
        <div class="notice-des">
          你的报告{{item.id}}
        </div>
      </div>
    </div>
    <!--    <div  v-for="order in orders" :key="order.id">-->
    <!--      <report-template />-->
    <!--    </div>-->
  </div>
</template>

<script>
  import { NavBar, Toast } from 'vant'
  // import report-template from './template'
  import ReportTemplate from './template'

  export default {
    components: {
      ReportTemplate,
      [NavBar.name]: NavBar
    },
    data () {
      return {
        // 一个对象
        orders: [],
        reports: [
          { id: '1', created: '2019-4-30 12:30:12' },
          { id: '2', created: '2019-4-30 12:30:15' }
        ]
      }
    },
    // 生命周期函数
    async created () {
      await this.getOrders()
    },
    methods: {
      // 返回上一页的方法
      onClickLeft () {
        this.$router.go(-1)
      },
      async getOrders (type) {
        const { data } = await this.$api.order.orderList({ type: 0 })
        console.log(data)
        if (data.code !== 200) {
          Toast(data.desc)
        } else {
          // this.orders = data.data
          this.orders = data.data.filter(item => [5, 6, 7].includes(item.state))
        }
      },
      detailreport () {
        this.$router.push({ name: 'detailreport'})
      }
    }
  }
</script>

<style scoped lang="less">
  .report-title{
    position: relative;
    text-align: center;
    width: 100%;
    /*height: 20%;*/
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 600;
    font-size: large;
  }
  .notice-content{
    margin: 10px;
    -webkit-box-shadow: 0 3px 20px rgb(226, 230, 229);
    -moz-box-shadow: 0 3px 20px rgb(226, 230, 229);
    box-shadow: 0 3px 20px rgb(226, 230, 229);
    background-color: white;
    height: 80px;
    padding: 15px;
    border-radius: 10px;
    font-size: 15px;
    /*上半部分*/
    .notice-header{
      height: 30px;
      border-bottom:0.05rem solid #f2f3f5;//画一条分界线
      /*系统两个字*/
      .notice-label{
        background-color: #1989fa;
        color: white;
        font-size: 13.5px;
        border-radius: 10px;
        padding: 1px;
        margin-right: 10px;
      }
      /*报告生成*/
      .notice-title{
        font-size: 15px;
        font-weight: 600;
      }
      .notice-time{
        font-size: 13.5px;
        float: right;
      }
    }
    /*下半部分*/
    .notice-des{
      font-size: 13px;
      margin-top: 10px;
    }
  }
</style>
